import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:kasax_demos2/entry/data_posts_test.dart';
import 'package:kasax_demos2/entry/entrys.dart';
import 'package:shimmer/shimmer.dart';

import 'entry_movie.dart';

/// https://blog.csdn.net/weixin_45365889/article/details/102611468
/// https://pub.flutter-io.cn/packages/shimmer
/// 有效资料:https://jishuin.proginn.com/p/763bfbd5ff14
class ShimmerDemo extends StatefulWidget {
  const ShimmerDemo({Key? key}) : super(key: key);

  @override
  _ShimmerDemoState createState() => _ShimmerDemoState();
}

class _ShimmerDemoState extends State<ShimmerDemo> {
  var dataList = PostsDatas.TEST_POSTS;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    lateLoadData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Shimmer闪烁动画"),
      ),
      body: Container(
        child: ListView.separated(
            itemBuilder: (context, index) {
              var inf = dataList[index];
              return isLoading ? buildLoadingPlaceHolder() : buildListItem(inf);
            },
            separatorBuilder: (context, index) {
              return Divider();
            },
            itemCount: dataList.length),
      ),
    );
  }

  Container buildListItem(Posts inf) {
    return Container(
      margin: EdgeInsets.only(left: 16, right: 16, top: 10),
      child: Row(
        children: [
          Container(
            width: 100,
            margin: EdgeInsets.only(right: 10),
            height: 120,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(14),
                image: DecorationImage(
                    image: NetworkImage(inf.imageUrl), fit: BoxFit.cover)),
          ),
          Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(
                inf.title,
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 5),
              Text(inf.author),
              SizedBox(height: 5),
              Text(
                inf.description,
                maxLines: 5,
                style: TextStyle(color: Colors.grey),
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ))
        ],
      ),
    );
  }

  void lateLoadData() async {
    await Future.delayed(Duration(seconds: 5));
    setState(() {
      print("重置变量，刷新界面");
      isLoading = false;
      print("刷新界面");
    });
  }

  buildLoadingPlaceHolder() {
    var baseColor = Color(0xFFD6D6D6);
    return Container(
      margin: EdgeInsets.only(left: 16, right: 16, top: 10),
      child: Shimmer.fromColors(
        baseColor: Color(0xFFD6D6D6),
        highlightColor: Colors.white,
        period: Duration(seconds: 2),
        child: Row(
          children: [
            Container(
              width: 100,
              height: 120,
              margin: EdgeInsets.only(right: 10),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12), color: Colors.white),
            ),
            Expanded(
                child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                SizedBox(
                  width: 80,
                  child: Container(
                    color: baseColor,
                  ),
                  height: 20,
                ),
                SizedBox(height: 5),
                SizedBox(
                  width: 80,
                  child: Container(
                    color: baseColor,
                  ),
                  height: 20,
                ),
                SizedBox(height: 5),
                SizedBox(
                  width: 150,
                  child: Container(
                    color: baseColor,
                  ),
                  height: 20,
                ),
              ],
            ))
          ],
        ),
      ),
    );
  }
}
